import React from 'react';
import Api from 'Utils/api';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import { message } from 'antd';
import { formatUtcTime, generateUUID } from 'Utils/index';
import './../ComplaintPage/index.scss';
import EllipticalTitle from '../../EllipticalTitle';

class KnowledgePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      pageSize: BROWSER_MODE.isVertical(this.props.mode) ? 10 : 7,
      dataCount: 0,
      currentPage: 1,
      data: [],
      suggestsList: [],
      testNum: ''
    };
    this.IsVertical = BROWSER_MODE.isVertical(this.props.mode);
    this.initData = ::this.initData;
    this.getList = ::this.getList;
    this.suggestsList = ::this.suggestsList;
    this.initSpeakNum = ::this.initSpeakNum;
    this.tableList = ::this.tableList;
  }
  componentWillMount() {
    this.initData();
    this.getList();
    this.initSpeakNum();
  }
  initSpeakNum() {
    const api = new Api({
      method: 'GET',
      path: '/testers/tester_count',
      success: (json) => {
        this.setState({
          testNum: json.tester_total_count,
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  handspeak() {
    this.props.dispatch(routerActions.push('/interactive/knowledge/login'));
  }
  getList() {
    const api = new Api({
      method: 'GET',
      path: '/testers/admin',
      success: (json) => {
        this.setState({
          suggestsList: this.IsVertical ? json.data_list.slice(0, 8) : json.data_list.slice(0, 5),
        });
      }
    });
    api.run();
  }
  suggestsList() {
    const { suggestsList } = this.state;
    let text = '';
    suggestsList.forEach((k) => {
      text += `
      <p class="complaint-list-p">
                  <span>${formatUtcTime(k.modify_time)}</span>
                  <span>${k.name}</span>
                  <span>参与测评</span>
                </p>
      `;
    });
    $('#suggestsList').html(text);
  }
  tableList() {
    const { data } = this.state;
    const nodeInfo = [];
    data.forEach((k, i) => {
      nodeInfo.push((
        <p className="complaint-body complaint-body-test" key={generateUUID()}>
          <span>{i + 1}</span>
          <span>{k.name}</span>
          <span>{k.score}</span>
        </p>
      ));
    });
    return nodeInfo;
  }

  initData() {
    const { currentPage, pageSize } = this.state;
    const query = {};
    query.limit = pageSize;
    query.offset = (currentPage - 1) * pageSize;
    const api = new Api({
      method: 'GET',
      path: '/testers/user_top',
      query,
      success: (res) => {
        this.setState({
          data: res.data_list,
          dataCount: res.total_count,
        });
      },
      error: () => { }
    });
    api.run();
  }

  render() {
    const { testNum } = this.state;
    if (this.IsVertical) {
      return (
        <div className="v-complaint-project-page exam-page">
          <EllipticalTitle
            text="最新动态"
            report={<span className="report-num">
                已有<span>{testNum}</span>人参加测评
              </span>}
          />
          <div className="complaint-rigth-top">
            <div id="suggestsList" className="complaint-list">
              {
                this.suggestsList()
              }
            </div>
          </div>
          <div className="complaint-info">
            <EllipticalTitle
              text="英雄榜TOP10"
            />
            <div className="complaint-left">
              <div className="complaint-table">
                <p className="complaint-head">
                  <span>序号</span>
                  <span>姓名</span>
                  <span>得分</span>
                </p>
                <div id="tableList">
                  {
                    this.tableList()
                  }
                </div>
              </div>
            </div>
          </div>
          <EllipticalTitle
            text="我要测评"
          />
          <div className="complaint-rigth-bottom">
            <div className="complaint-icon" onClick={this.handspeak.bind(this)}>
              <img src="images/interactive/icon_knowledge.png" alt="我要测评" />
              <div className="icon-text">我要测评</div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="complaint-project-page complaint-table-td exam-page">
        <div className="complaint-main-wrap">
          <div className="complaint-rigth">
            <EllipticalTitle
              text="最新动态"
              report={<span className="report-num">
                已有<span>{testNum}</span>人参加测评
              </span>}
            />
            <div className="complaint-rigth-top">
              <div id="suggestsList" className="complaint-list">
                {
                  this.suggestsList()
                }
              </div>
            </div>
            <EllipticalTitle
              text="我要测评"
            />
            <div className="complaint-rigth-bottom">
              <div className="complaint-icon" onClick={this.handspeak.bind(this)}>
                <img src="images/interactive/icon_knowledge.png" alt="我要测评" />
                <div className="icon-text">我要测评</div>
              </div>
            </div>
          </div>
          <div className="complaint-containsLeft">
            <EllipticalTitle
              text="英雄榜TOP10"
            />
            <div className="complaint-left">
              <div className="complaint-table">
                <p className="complaint-head">
                  <span>序号</span>
                  <span>姓名</span>
                  <span>得分</span>
                </p>
                <div id="tableList">
                  {
                    this.tableList()
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer,
  };
}

export default connect(mapStateToProps)(KnowledgePage);
